<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>青少年科学教育研究中心</title>
    <link rel="stylesheet" href="../css/share_page.css" />
    <link rel="stylesheet" href="../css/iconfont.css" />
    <script src="../plugins/jweixin-1.6.0.js"></script>
    <script src="../plugins/jquery-3.6.0.min.js"></script>
    <script
      src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"
      type="text/javascript"
      charset="utf-8"
      async
      defer
    ></script>
    <script src="../plugins/canvas2image.js" type="text/javascript"></script>
    <script src="../plugins/NativeShare.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="container">
      <div id="header">
        <div id="back"></div>
        <div id="address">走进科学</div>
        <div id="share" class="iconfont icon-fenxiang"></div>
      </div>
      <div id="main">
        <!-- <div class="circle"></div> -->
        <div id="share_card">
          <div id="share_img"></div>
          <div id="share_data">
            <div class="count_data">
              <p style="font-size: 2rem">
                <span style="display: inline-block; color: #552cea">1</span>
                节
              </p>
              <p style="font-size: 2rem">科学动画课</p>
            </div>
            <div
              class="count_data"
              style="border-left: 1px solid #ccc; border-right: 1px solid #ccc"
            >
              <p style="font-size: 2rem">
                <span style="display: inline-block; color: #552cea">4</span>
                个
              </p>
              <p style="font-size: 2rem">科学知识点</p>
            </div>
            <div class="count_data">
              <p style="font-size: 2rem">
                <span style="display: inline-block; color: #552cea">1</span>
                次
              </p>
              <p style="font-size: 2rem">互动操作</p>
            </div>
          </div>
          <div id="share_join">
            <div style="font-size: 2rem">快来扫码加入我们吧!</div>
            <div class="hand"></div>
            <div class="QRcode"></div>
          </div>
        </div>
        <div id="share_addr">
          <div class="wechat_firend">
            <div id="addr_1"></div>
            <p style="font-size: 2rem">微信好友</p>
          </div>
          <div class="wechat_script">
            <div id="addr_2"></div>
            <p style="font-size: 2rem">朋友圈</p>
          </div>
          <div class="save_img">
            <div id="addr_3"></div>
            <p style="font-size: 2rem">保存图片</p>
          </div>
        </div>
      </div>
      <div id="footer">
        <p>取消</p>
      </div>
    </div>
  </body>
  <script type="module">
    import { handleLocalStorage } from '../js/localstorage.js'
    import Canvas2Image from '../plugins/canvas2image.js'
    $(function () {
      let width = document.documentElement.clientWidth
      let height = document.documentElement.clientHeight
      let DESIGN_WIDTH = 750
      let DESIGN_HEIGHT = 1334

      document.documentElement.style.fontSize =
        (width * 12) / DESIGN_WIDTH + 'px'

      if (height / width < DESIGN_HEIGHT / DESIGN_WIDTH) {
        $('html').css({
          height: (width * DESIGN_HEIGHT) / DESIGN_WIDTH,
        })
      }

      function getImg() {
        // 分享卡片里的图片的位置
        let shareimg = $('#share_img')
        if (shareimg.children('img')) {
          shareimg.children('img').remove()
        }
        let img = document.createElement('img')
        let img64 = handleLocalStorage('get', 'shareImg')
        $(img).attr('src', img64)
        shareimg.append(img)
        // 此时不再去清空存储的图片的数据，当三种分享的功能流程完成之后再去清楚存储的数据
        // handleLocalStorage('set', 'shareImg', '')
      }

      // 获取和设置header
      let header = $('#header')
      let headerBack = $('#back')
      headerBack.on('click', function (e) {
        location.href = '../index.html'
      })

      // 获取和设置footer
      let footer = $('#footer')
      footer.on('click', function (event) {
        event.stopPropagation()
        location.href = './study_report.html'
      })

      // 获取和设置main
      let main = $('#main')
      main.css({
        width: width,
        height: $('#container').height() - header.height() - footer.height(),
      })

      let maskdiv = $('.maskdiv')
      maskdiv.css({
        width: width,
        height: main.height(),
      })

      // 背后的半圆
      let bg_circle = $('.circle')
      bg_circle.css({
        width: width,
        height: (width * 140) / DESIGN_WIDTH,
        'border-bottom-left-radius': width * 0.5,
        'border-bottom-right-radius': width * 0.5,
      })

      // 获取和设置统计卡片区域
      let sharecard = $('#share_card')
      sharecard.css('left', (width - sharecard.width()) / 2)

      // 分享卡片里的数据区域
      let share_data = $('#share_data')

      let share_join = $('#share_join')

      // 分享地址选择的位置
      let wechat_firend = $('.wechat_firend')
      let wechat_script = $('.wechat_script')
      let save_img = $('.save_img')

      $.ajax({
        url: 'http://39.101.150.56:3000/getSignature',
        type: 'POST',
        async: false,
        success: function (data) {
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: 'wx59390363102a4d5f', // 必填，公众号的唯一标识
            timestamp: data.timestamp.toString(), // 必填，生成签名的时间戳
            nonceStr: data.noncestr, // 必填，生成签名的随机串
            signature: data.signature, // 必填，签名
            jsApiList: [
              'updateAppMessageShareData',
              'updateTimelineShareData',
              'onMenuShareTimeline',
              'onMenuShareAppMessage',
              'onMenuShareQQ',
              'onMenuShareWeibo',
              'onMenuShareQZone',
              'startRecord',
              'stopRecord',
              'scanQRCode',
            ], // 必填，需要使用的JS接口列表
            success: function () {
              alert('config配置成功')
            },
          })
        },
      })

      wx.ready(function () {
        wechat_firend.on('click', function (e) {
          e.stopPropagation()
          // TODO: 分享给微信朋友的功能
        })

        wechat_script.on('click', function (e) {
          alert('111')
          e.stopPropagation()
          // TODO: 分享到微信朋友圈的功能
          // 这个微信接口的功能是调用 右上角三个点之后选择分享朋友圈后设置分享到朋友圈的内容的接口
          wx.onMenuShareTimeline({
            title: '互联网之子',
            desc: '在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，注定如此的事，它们其实没有非得如此，事情是可以改变的。更重要的是，有些事既然错了，那就该做出改变。',
            link: 'http://www.donghao.fun/view/share_test.html', // 这个地方的link必须是js域名以内的地址
            imgUrl:
              'http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg',
            trigger: function (res) {
              // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
              alert('用户点击发送给朋友')
            },
            success: function (res) {
              alert('已分享')
            },
            cancel: function (res) {
              alert('已取消')
            },
            fail: function (res) {
              alert(JSON.stringify(res))
            },
          })
        })
      })

      save_img.on('click', function (e) {
        e.stopPropagation()
        // TODO: 保存图片到本地功能。
        // TODO: 有一个语法的错误需要解决
        // 选择要转换成canvas的html的div
        html2canvas(document.getElementById('share_card'), {
          useCORS: true, //允许跨域
          scale: 2,
          dpi: window.devicePixelRatio * 2,
          height: $('#share_card').height(),
          width: $('#share_card').width(),
          backgroundColor: null,
        }).then((canvas) => {
          Canvas2Image.saveAsImage(
            canvas,
            $(canvas).width(),
            $(canvas).height(),
            'jpeg',
            '我的课程报告'
          )
        })
      })

      getImg()

      window.addEventListener('resize', function (e) {
        location.reload()
      })
    })
  </script>
</html>
